<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref, render } from 'vue'

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/addons/libs/stats.module.js'

import { TrackballControls } from 'three/addons/controls/TrackballControls.js'
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'

const dataview = ref(null)

onMounted(async () => {
  // const res = await axios.get('/0_nodes_SPE10.txt')
  // const res = await axios.get('/vs_2kw_BO3.csv')
  // const res = await axios.get('/bo3_vs_BO3.csv')
  const res = await axios.get('/vs_mod10_BO3.csv')

  const data = res.data.split('\n').map((line) => line.split(','))

  // scene camera renderer
  const scene = new THREE.Scene()
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight - 100)

  const material = new THREE.PointsMaterial({ color: 0x00ff00, size: 0.01 })

  const vecs = []

  let min_x = 10e10,
    max_x = -10e10
  let min_y = 10e10,
    max_y = -10e10
  let min_z = 10e10,
    max_z = -10e10

  const show_nums = 2000000

  for (let i = 0; i < show_nums; i++) {
    const x = parseFloat(data[i][0])
    const y = parseFloat(data[i][1])
    const z = parseFloat(data[i][2])

    min_x = min_x > x ? x : min_x
    min_y = min_y > y ? y : min_y
    min_z = min_z > z ? z : min_z
    max_x = max_x < x ? x : max_x
    max_y = max_y < y ? y : max_y
    max_z = max_z < z ? z : max_z
  }

  console.log(min_x, max_x, min_y, max_y, min_z, max_z)
  console.log('data length: ', data.length)

  const aspect_x = 1
  const aspect_y = 1
  const aspect_z = 1

  for (let i = 0; i < show_nums; i++) {
    const x = parseFloat(data[i][0])
    const y = parseFloat(data[i][1])
    const z = parseFloat(data[i][2])


    vecs.push((x - min_x) * aspect_x)
    vecs.push((y - min_y) * aspect_y)
    vecs.push((z - min_z) * aspect_z)
  }

  const geometry = new THREE.BufferGeometry()
  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vecs), 3))
  const point = new THREE.Points(geometry, material)
  scene.add(point)

  function getColorFromValue(value) {
    const green = new THREE.Color(0x00ff00)
    const red = new THREE.Color(0xff0000)
    return green.lerp(red, value)
  }

  const axesHelper = new THREE.AxesHelper(
    1000
  )
  scene.add(axesHelper)

  const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000)
  camera.position.set(0,0,500)

  dataview.value.appendChild(renderer.domElement)

  const controls = new TrackballControls(camera, renderer.domElement)
  controls.rotateSpeed = 1.0
  controls.zoomSpeed = 1.2
  controls.panSpeed = 0.8
  controls.noZoom = false
  controls.noPan = false
  controls.staticMoving = true
  controls.dynamicDampingFactor = 0.3

  function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
    controls.update()
  }
  animate()
})
</script>

<template>
  <div>
    <!-- {{ data }} -->
    <div ref="dataview"></div>
  </div>
</template>

<style lang="scss" scoped></style>
